<template>
	<div class="body-content">
		<el-menu theme="dark" :unique-opened="true" :default-active="activeName" class="el-menu-demo menu" mode="horizontal" @select="selectMenuHandle">
			<template v-for="item in navDatas">
				<el-menu-item :index="item.LinkUrl+';'+item.Id+';'+item.Name">
					<li :class="item.Icon" style="padding-right: 10px"></li>{{item.Name}}</el-menu-item>
			</template>
		</el-menu>
		<!--主区域内容-->
		<section id="mainContent">
			<components ref="views" :is="currentView" :sub-args="subArgs" v-on:changeView="changeView" v-on:backPrev="backPrev" v-on:getSelfDistrict="getDatas" v-on:deleteCurrentDistrict="deleteCurrentDistrict"></components>
		</section>
	</div>
</template>
<script>
	import $ from 'jquery'
	import { GloabFun, Animation, HttpServer } from '../../../assets/js/common.js'
	const BookManagement = resolve => require(['./BookList/Index.vue'], resolve)
	const BorrowHistory = resolve => require(['./BorrowHistory.vue'], resolve)
	const Charged = resolve => require(['./ChargeManagement.vue'], resolve)
	const Hold = resolve => require(['./HoldManagement.vue'], resolve)
	const OverDue = resolve => require(['./OverDueManagement.vue'], resolve)
	const Preborrow = resolve => require(['./PreborrowManagement.vue'], resolve)
	const NewBook = resolve => require(['./NewBookList.vue'], resolve)
	const BookRanking = resolve => require(['./BookRanking.vue'], resolve)
	const Announcement = resolve => require(['./NoticeList.vue'], resolve)
	const HomePage = resolve => require(['./HomePage.vue'], resolve)
	const LibraryLocation = resolve => require(['./LibraryLocation.vue'], resolve)
	const ContactUs = resolve => require(['./ContactUs.vue'], resolve)
	export default {
		components: {
			BookManagement,
			BorrowHistory,
			Charged,
			Hold,
			OverDue,
			Preborrow,
			NewBook,
			BookRanking,
			Announcement,
			HomePage,
			LibraryLocation,
			ContactUs
		},
		data() {
			return {
				persionalInfo: {
					type: '未知',
					readercode: '未知',
					holdcount: 0,
					holdlimit: 0,
					overduecount: 0,
					overduelimit: 0,
					chargedcount: 0,
					chargedlimit: 0
				},
				hasLogin: false,
				navDatas: [],
				menuList: [],
				horizonMenuList: [],
				activeName: '',
				currentView: '',
				preView: [],
				subArgs: {},
				navArgs: [],
				indexView: '',
				currentLanguage: this.$t('message.cnLanguage'),
				otherLanguage: this.$t('message.enLanguage'),
				nickName: '测试',
				horizonActive: 0,
				//currentHorizon:null,
				uid: 'admin',
				initTime: true,
				currentScrollTop: 0
			}
		},
		methods: {
			generateSubargsObj(array) {
				var obj = {};
				array.forEach(function(item, index) {
					switch(index) {
						case 0:
							obj.view = item;
							break;
						case 1:
							obj.id = item;
							break;
						case 2:
							obj.name = item;
							break;
					}
				});
				return obj;
			},
			selectMenuHandle(viewStr) {
				// console.log('viewStr',viewStr)
				var argsObj = this.generateSubargsObj(viewStr.split(";"));
				this.changeView(argsObj.view, argsObj.name);
			},
			changeView(view, name) {
				GloabFun.clearRecordPreview.call(this);
				window.clearInterval(window.deviceIntervalid);
				window.clearInterval(window.deviceDetailIntervalid);
				this.subArgs.CurrentView = name;
				Animation.animation($("#mainContent"), function() {
					this.currentView = view;
				}.bind(this));
			},
			backPrev() {},
			formateMenuList(menus) {
				this.orederMenu(menus);
				var array = [],
					temp = '',
					tempArray = [],
					tempObj = {};
				if(menus.length > 0) {
					for(var i = 0; i < menus.length; i++) {
						if(temp != '') {
							if(temp === menus[i].Area) {
								tempArray.push(menus[i]);
								if(i === menus.length - 1) {
									tempObj.title = temp;
									tempObj.list = tempArray;
									array.push(tempObj);
								}
							} else {
								tempObj.title = temp;
								tempObj.list = tempArray;
								array.push(tempObj);
								tempArray = [];
								tempObj = {};
								tempArray.push(menus[i]);
								temp = menus[i].Area;
								if(i === menus.length - 1) {
									tempObj.title = temp;
									tempObj.list = tempArray;
									array.push(tempObj);
								}
							}
						} else {
							temp = menus[i].Area;
							tempArray.push(menus[i]);
							if(i === menus.length - 1) {
								tempObj.title = temp;
								tempObj.list = tempArray;
								array.push(tempObj);
							}
						}
					}
				}
				return array;
			},
			orederMenu(menus) {
				Array.prototype.slice.call(menus);
				//var tempArray=menus.concat([]);
				menus.sort(function(a, b) {
					return a.Order - b.Order || a.AreaSort - b.AreaSort;
				});
			},
			deleteCurrentDistrict(Id) {
				if(Id.toString() === this.activeName) {
					this.activeName = '';
				}
			},
			getDatas() {
				HttpServer.httpGet.call(this, '/Api/Reader/GetReaderByCode?readercode=' + GloabFun.getReaderCode(), function(response) {}, function(response) {
					// console.log('个人信息', response);
					if(response.data.code === 0) {
						response.data.readercode = GloabFun.getReaderCode();
						this.persionalInfo = response.data;
					} else {
						this.$message.error(response.data.msg);
					}
				});
			}
		},
		created() {
			if(GloabFun.getReaderCode() != '') {
				this.hasLogin = true;
				this.getDatas();
			}
			this.navDatas.push({
				Id: 1,
				Name: '首页',
				Icon: 'fa fa-home',
				LinkUrl: 'HomePage'
			});
			this.navDatas.push({
				Id: 2,
				Name: '图书检索',
				Icon: 'fa fa-book',
				LinkUrl: 'BookManagement'
			});
			// this.navDatas.push({
			// 	Id: 4,
			// 	Name: '借阅排行',
			// 	Icon: 'fa fa-bars',
			// 	LinkUrl: 'BookRanking'
			// });
			this.navDatas.push({
				Id: 3,
				Name: '我的预借',
				Icon: 'fa fa-search',
				LinkUrl: 'Preborrow'
			});
			this.navDatas.push({
				Id: 6,
				Name: '我的借阅',
				Icon: 'fa fa-folder',
				LinkUrl: 'Hold'
			});
			this.navDatas.push({
				Id: 5,
				Name: '历史借阅',
				Icon: 'fa fa-history',
				LinkUrl: 'BorrowHistory'
			});
//			this.navDatas.push({
//				Id: 7,
//				Name: '我的催还',
//				Icon: 'fa fa-bell',
//				LinkUrl: 'OverDue'
//			});
			this.navDatas.push({
				Id: 8,
				Name: '馆藏分布',
				Icon: 'fa fa-location-arrow',
				LinkUrl: 'LibraryLocation'
			});
			this.navDatas.push({
				Id: 9,
				Name: '联系我们',
				Icon: 'fa fa-phone',
				LinkUrl: 'ContactUs'
			});
			this.currentView = this.navDatas[0].LinkUrl;
			this.activeName = this.navDatas[0].LinkUrl + ';' + this.navDatas[0].Id + ';' + this.navDatas[0].Name;
		}
	}
</script>
<style scoped>
	@import '../../../assets/css/font-awesome-4.7.0/css/font-awesome.css';
</style>
<style scoped lang="less">
	@headerH: 150PX;
	.body-content {
		// height:e("calc(100% - 65px)");
		background-color: #E0E0E0;
		.menu {
			margin-top: 58px;
			padding-left: 160px;
		}
		.el-menu--horizontal .el-menu-item {
			margin-right: 27px !important;
		}
		#mainContent {
			width: e("calc100%") !important;
			height: 100% !important;
			padding: 10px 150px;
			background-color: #E0E0E0;
		}
	}
	
	@media screen and (max-width: 900px) {
		.body-content {
			// height:e("calc(100% - 65px)");
			background-color: #E0E0E0;
			.menu {
				margin-top: 58px;
				padding-left: 160px;
			}
			.el-menu--horizontal .el-menu-item {
				margin-right: 27px !important;
			}
			#mainContent {
				width: e("calc100%") !important;
				height: 100% !important;
				padding: 10px 150px;
				background-color: #E0E0E0;
				// padding-left: 220px;
			}
		}
	}
	
	@media screen and (min-width: 900px) {
		.body-content {
			// height:e("calc(100% - 65px)");
			background-color: #E0E0E0;
			.menu {
				margin-top: 58px;
				padding-left: 160px;
			}
			.el-menu--horizontal .el-menu-item {
				margin-right: 27px !important;
			}
			#mainContent {
				width: e("calc100%") !important;
				height: 100% !important;
				padding: 10px 150px;
				background-color: #E0E0E0;
				// padding-left: 220px;
			}
		}
	}
</style>